<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.box {
				width: 300px;
				height: 300px;
				background-color: hotpink;
				margin: 0 auto;
				/* 盒子阴影box-shadow */
				box-shadow: 10px 10px 10px -4px rgba(0, 100, 0, .3);
			}

			li {
				list-style: none;
			}

			div:hover {
				box-shadow: 20px 15px 8px -15px rgba(200, 0, 0, .3);
			}

			.box h4 {
				text-indent: 2em;
			}

			.text {
				color: black;
				width: 300px;
				height: 300px;
				background-color: skyblue;
				margin: 0 auto;
				text-align: center;

				text-shadow: 5px 5px 2px hotpink;
			}
			
			.text ul {
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<h1>css3新的属性</h1>
		盒子阴影
		<div class="box">
			<ul>
				<li>必须 阴影水平位置</li>
				<li>必须 阴影垂直位置</li>
				<li>可选 阴影模糊距离，即虚实度</li>
				<li>可选 阴影尺寸</li>
				<li>可选 颜色</li>
				<li>可选 内外阴影insert</li>
			</ul>
			<h4>1.outside是默认但不能写出来否则阴影无效</h4>
			<h4>2.盒子阴影不占用空间</h4>
			<h4>3.:hover可以给任何元素添加,包括p,span,h等</h4>
		</div>
		<h3>实际开发可以调试实现</h3>
		<div class="text">文字阴影的展示
			<ul>
				<li>必须 阴影x轴位置</li>
				<li>必须 阴影y轴位置</li>
				<li>可选 模糊距离</li>
				<li>可选 颜色</li>
			</ul>

		</div>
	</body>
</html>
